<template>
  <view class="content_box">
    <view class="li_box">
      <view class="card_green_box">
        <view class="card_title_box" style="font-size: 32rpx">
          <view>检测指标:含固量</view>
        </view>
        <u-line color="#c2c9c4" />
        <view style="margin-top: 10rpx" class="card_li_box">
          <view>时间限制</view>
          <u-calendar :show="show" mode="range"></u-calendar>
          <view class="li_input">
            <input @focus="focus" class="border_input" readonly type="text" />
          </view>
        </view>
        <u-checkbox-group v-model="checkboxValue1" placement="column">
          <u-checkbox
            activeColor="#1a512c"
            labelColor="#1a512c"
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in checkboxList1"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
          </u-checkbox>
        </u-checkbox-group>
        <u-line color="#c2c9c4" />
        <view class="pop_btn_box">
          <view class="back_btn">返回</view>
          <view class="back_btn submit_btn">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      checkboxValue1: [],
      // 基本案列数据
      checkboxList1: [
        {
          name: "挥发性固体含量VS",
          disabled: false,
        },
        {
          name: "挥发性固体含量VS",
          disabled: false,
        },
        {
          name: "挥发性固体含量VS",
          disabled: false,
        },
      ],
    };
  },
  methods: {
    focus() {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.pop_btn_box {
  margin-top: 40rpx;
  width: 100%;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .back_btn {
    width: 200rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    background-color: #fff;
    color: #1a512c;
    font-weight: 700;
    border: #1a512c 2rpx solid;
  }
  .submit_btn {
    background-color: #1a512c;
    color: #fff;
  }
}
.li_input {
  width: 80%;
  .border_input {
    border-radius: 10rpx;
    border: #c5ddcd solid 2rpx;
    height: 50rpx;
    width: 100%;
  }
}
.textarea_border {
  margin-top: 20rpx !important;
  background-color: #c5ddcd;
  height: 200rpx !important;
}
.btn_list_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60rpx;
  margin-top: 20rpx;
  .btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    width: 30%;
    height: 100%;
    background-color: #d93434;
    color: #fff;
  }
}
.content_box {
  width: 100vw;
  min-height: 100vh;
  background-color: #e3ede2;
  .li_box {
    width: 100vw;
    padding: 20rpx;
    box-sizing: border-box;
    .card_green_box {
      padding: 20rpx;
      background-color: #f4fbf3;
      color: #1b9c46;
      border-radius: 10rpx;
      font-size: 28rpx;
      .card_title_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        font-weight: 700;
        .card_tag_green {
          background-color: #1b9c46;
          color: #fff;
          padding: 5px 8px;
          font-size: 24rpx;
          border-radius: 8rpx;
        }
      }
      .card_li_box {
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
      }
    }
  }
  .btn_green_box {
    width: 100%;
    height: 80rpx;
    border-radius: 14rpx;
    background-color: #1b9c46;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 20rpx;
  }
  .fixed_btn_green_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120rpx;
    background-color: #e3ede2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
